<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
  title="地图找房"
  left-arrow
  @click-left="onClickLeft"

/>
<!-- 地图 -->
 <baidu-map class="bm-view" :center="center" :zoom="11">
  <div v-if="show">
   <bm-label :content="Doms[index]"
   v-for="(item,index) in mapList" :key="index"
   @click="nextMap(mapList[index])"
   :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
   :labelStyle="{color: 'red',
    fontSize : '16px',height:'49px',
    width:'65px',borderRadius:'50%',
    backgroundColor:'rgba(12,181,106,.9)',
    border:'2px solid #fff',
    textAlign:'center',
    lineHeight:'2px',
    padding:'1px',
    paddingTop:'16px',
    color:'#fff',
    fontSize:'12px',
    position: 'absolute',
    wordbBreak: 'break-all',
    }">
    </bm-label>
</div>
<!-- 小标签 -->
<div v-else>
   <bm-label
   @click="pop(item)"
   v-for="(item,i) in threeList" :key="i"
   :content="item.label +`\n`+ item.count+`套` "
  :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
   :labelStyle="{color: '#fff', fontSize : '24px',
   backgroundColor:'rgba(12,181,106,.9)',
     border:'0', fontSize:'13px',
     borderRadius:'5px',
     height:'18px',
     width:'100px'
     }"

  />
</div>
</baidu-map>
<!-- 弹出的部分 -->
<van-popup v-model="pops" position="bottom" :style="{ height: '50%' }" >
<!-- 标题 -->
  <div class="popTitle">
<van-row type="flex" justify="space-between">
  <van-col span="8">房屋列表</van-col>
  <van-col span="8">更多房源</van-col>
</van-row>
  </div>
  <!-- 房屋列表 -->
  <!-- 渲染的房子数据列表 -->
<van-card
v-for="(item,index) in detailed" :key="index"
  :price="item.price"
  :desc="item.desc"
  :title="item.title"
  :thumb="`http://liufusong.top:8080` +item.houseImg"
>
  <template #tags>
    <van-tag plain type="danger"
    v-for="(item,index) in item.tags" :key="index">
      {{item}}
     </van-tag>

  </template>
</van-card>

</van-popup>
   <!-- 加载状态 -->
      <div class="loading" v-if="hide">
      <van-loading size="24px" vertical>加载中...</van-loading>
      </div>
  </div>
</template>

<script>
import { mapApi, houses } from '@/api'
export default {
  data () {
    return {
      // 控制加载提示的显示
      hide: true,
      // 城市数据
      mapList: [],
      // 第三层的数据
      threeList: [],
      // center: { lng: 0, lat: 0 },
      center: JSON.parse(localStorage.getItem('id')).label,
      zoom: 5,
      doms: '',
      Doms: [],
      i: 0,
      show: true,
      pops: false,
      // 房屋详细信息
      detailed: []
    }
  },

  async created () {
    const id = JSON.parse(localStorage.getItem('id'))
    this.center = id.label
    const res = await mapApi(id.value)
    console.log(res)
    this.mapList = res.data.body
    console.log(this.mapList)
    this.mapList.forEach(item => {
      this.Doms.push(`
      <p>${item.label}</p>
      <p>${item.count}套</p>
      `)
    })
    // "AREA|48e5738f-97f0-3cb0"
  },
  methods: {
    async nextMap  (item) {
      this.hide = true
      this.i++
      console.log(this.i)
      if (this.i < 2) {
        this.hide = true
        console.log(item)
        const res = await mapApi(item.value)
        console.log(res)
        this.center = item.label
        this.mapList = res.data.body
        console.log(this.mapList)
        console.log(this.center)
        this.Doms = []
        this.mapList.forEach(item => {
          this.Doms.push(`
      <p>${item.label}</p>
      <p>${item.count}套</p>
      `)
        })
      } else {
        this.center = item.label
        this.hide = true
        this.show = false
        console.log(item)
        const it = await mapApi(item.value)
        this.threeList = it.data.body
        console.log(it)
      }
    },
    async pop (item) {
      this.hide = true
      this.$nextTick(() => {
        this.pops = true
      })
      const res = await houses(item.value)
      this.detailed = res.data.body.list
      console.log(this.detailed)
    },
    onClickLeft () {
      this.$router.go(-1)
    }

  },
  watch: {
    mapList () {
      this.hide = false
    },
    threeList () {
      this.hide = false
    },
    detailed () {
      this.hide = false
    }

  }

}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 620px;
}
.circular {
  width: 70px;
  height: 70px;
  background-color: rgba(12,181,106,.5);
  border-radius: 50%;
  border: 2px solid hsla(0,0%,100%,.8);
  // overflow: hidden;
  position: absolute;
  .mapWord{
    color: #fff;
    font-size: 14px;
    width: 50px;
    text-align: center;
    line-height: 70px;
    // display: inline;
  }
}
.popTitle{
  height: 80px;
  background-color: #c0c0c2;
}
.loading {
  padding-top: 20px;
  margin: 0 auto;
  background-color: #000;
  opacity: 0.5;
  width: 80px;
  height: 80px;
  border-radius: 7px;
  position: fixed;
  top: 280px;
  left: 150px;
}
</style>
